<template>
  <div class="rbtop">
    <!-- <input type="text" class="" /> -->
    <!-- <el-form-item label="Approved by">
      <el-input v-model="formInline.user" placeholder="Approved by"></el-input>
    </el-form-item> -->
    <el-input v-model="input" placeholder="搜索" prefix-icon="el-icon-search" />
    <!-- <el-icon><search /></el-icon> -->
    <el-icon class="topicon"><search /></el-icon>
    <router-link to="/option" tag="div">
      <div class="caidan">
        <img src="../assets/img/caidans.png" alt="" />
      </div>
    </router-link>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { Search } from "@element-plus/icons-vue";

export default defineComponent({
  setup() {
    console.log(2);
    return {
      input: ref(""),
    };
  },
  components: {
    Search,
  },
});
</script>

<style lang="scss">
.rbtop {
  .el-icon {
    color: aliceblue;
  }
  .topicon {
    position: absolute;
    left: 27px;
    top: 21px;
    font-size: 18px;
    color: white;
  }
  .caidan {
    position: absolute;
    right: 20px;
    top: 8px;
    width: 39px;
    height: 39px;
    img {
      width: 100%;
    }
    &:hover {
      cursor: pointer;
    }
  }
  .el-input {
    width: 292px;
    margin-top: 10px;
    .el-input__inner {
      height: 30px;
      background: #2a2b3d;
      // outline: none;
      border: #111;
      color: white;
      width: 100%;
    }
  }
}

// .el-input__inner::placeholder {
//   text-indent: 10px;
// }
</style>
